When displaying an image within a responsive layout associated with a web or mobile application, the image may be placed within a container of nearly any shape and size. For example, an image may be placed within a container of one size at a first instance, while the same image is placed within a container of a second size at a second instance. The container size for image placement may vary for any number of reasons, such as, prominence of the image at the time of the display (e.g., association with a relevant search result), size of the device or display screen (e.g., larger device may result in a larger container size), or the like.
To facilitate cropping of an image for a container, some conventional techniques ensure placement of a single focal point within the boundaries of the container. Other techniques perform auto detection of a face and place the face within the boundaries of the container. With either technique, the image is simply sized to fit the container such that the image has an appropriate width and/or height that corresponds with the container. The excess image not within the boundaries of the container can then be cropped. This approach, however, can result in a meaningless display of the image, particularly due to the varying container sizes in which an image may be placed. For example, assume that an object of interest in an image is an individual, but the individual is only a small portion of the image. Using such conventional approaches, irrespective of the size of the container, the image is sized to fit the container (e.g., height of the container). As such, when the image is placed in a relatively small container, the individual is likely very difficult to see within the image amidst the details and content surrounding the individual.